<template>
  <div class="smart-screen">
    <div class="bg-decoration">
      <div class="left-decoration"></div>
      <div class="center-decoration">朗歌斯 - 自动生产线看板</div>
      <div class="right-decoration"></div>
    </div>
    <div class="header">
      <div class="time">{{ currentTime }}</div>
    </div>
    
    <div class="content">
      <div class="left-section">
        <div class="chart-box">
          <h3>一周不良品统计</h3>
          <div ref="weeklyDefectChart" class="chart"></div>
        </div>
        
        <div class="chart-box">
          <h3>关键工序</h3>
          <div ref="keyProcessChart" class="chart"></div>
        </div>
        
        <div class="chart-box">
          <h3>一周产量均差</h3>
          <div ref="weeklyOutputChart" class="chart"></div>
        </div>
      </div>
      
      <div class="center-section">
        <div class="chart-box">
          <h3>订单总体进度</h3>
          <div ref="totalProgressChart" class="chart"></div>
          <div class="progress-info">
            <p data-value="3000">总体计划</p>
            <p data-value="1000">已经生产</p>
            <p data-value="2">不良品</p>
            <p data-value="33.33%">完成率</p>
          </div>
        </div>
        
        <div class="chart-box">
          <h3>近期生产计划列表</h3>
          <div class="scroll-table-container">
            <table class="plan-table">
              <thead>
                <tr>
                  <th>订单号</th>
                  <th>计划数量</th>
                  <th>计划开始时间</th>
                  <th>计划结束时间</th>
                  <th>订单状态</th>
                  <th>完成率</th>
                </tr>
              </thead>
              <tbody ref="scrollBody">
                <tr v-for="item in productionPlanList" :key="item.orderId">
                  <td>{{ item.orderId }}</td>
                  <td>{{ item.planQuantity }}</td>
                  <td>{{ item.startTime }}</td>
                  <td>{{ item.endTime }}</td>
                  <td>
                    <span :class="['status', item.status]">{{ item.statusText }}</span>
                  </td>
                  <td>{{ item.completionRate }}%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <div class="right-section">
        <div class="chart-box">
          <h3>订单今日进度</h3>
          <div ref="dailyProgressChart" class="chart"></div>
          <div class="progress-info">
            <p>今日计划 <span>{{ dailyPlan }}</span></p>
            <p>已经生产 <span>{{ dailyProduced }}</span></p>
            <p>不良品 <span>{{ dailyDefects }}</span></p>
            <p>良品率 <span>{{ qualityRate }}%</span></p>
          </div>
        </div>
        
        <div class="info-box">
          <h3>当前班组</h3>
          <div class="team-info">
            <p>名称 <span>{{ currentTeam.teamName }}</span></p>
            <p>人数 <span>{{ currentTeam.personinCharge }}</span></p>
            <p>负责人 <span>{{ currentTeam.numberofTeamMembers }}</span></p>
            <p>电话 <span>{{ currentTeam.phone }}</span></p>
          </div>
        </div>
        
        <div class="chart-box exception-list">
          <h3>异常列表</h3>
          <div class="scroll-list">
            <div v-for="item in exceptionList" :key="item.id" class="exception-item">
              <span class="time">{{ item.time }}</span>
              <span class="type">{{ item.type }}</span>
              <span class="description">{{ item.description }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import http from '@/api/http'
// 时间显示
const currentTime = ref('')
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}年${month}月${day}日-${hours}时${minutes}分${seconds}秒`
}

let timer: number
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
  startScroll()
  getSmartDisplayWall()
  autoScroll()
  getDailyPlanModel()
  getTeam()
})

onUnmounted(() => {
  clearInterval(timer)
  if (teamTimer) clearInterval(teamTimer)
  if (dailyPlanTimer) clearInterval(dailyPlanTimer)
  clearInterval(scrollTimer)
})

// 订单总体进度数据
const totalPlan = ref(3000)
const produced = ref(1000)
const defects = ref(2)
const completionRate = ref(33.33)

// 今日进度数据
const dailyPlan = ref(0)
const dailyProduced = ref(0)
const dailyDefects = ref(0)
const qualityRate = ref(0)
const dailyPlanList = ref([])
let dailyPlanIndex = 0
let dailyPlanTimer = null

//订单今日进度
const getDailyPlanModel = () => {
  http.get('/api/MaterialManagement/GetDailyPlanModel').then(res => {
    dailyPlanList.value = Array.isArray(res.data) ? res.data : []
    if (dailyPlanList.value.length > 0) {
      dailyPlanIndex = 0
      setDailyPlanData(dailyPlanList.value[dailyPlanIndex])
      startDailyPlanTimer()
    }
  })
}

function setDailyPlanData(data) {
  dailyPlan.value = Number(data.dailyProductionTarget)
  dailyProduced.value = Number(data.actualOutput)
  dailyDefects.value = Number(data.numberofDefectiveProducts)
  qualityRate.value = data.actualOutput
    ? ((data.actualOutput - data.numberofDefectiveProducts) / data.actualOutput * 100).toFixed(2)
    : 0
  nextTick(() => {
    initCharts() // 确保数据更新后再刷新图表
  })
}

function startDailyPlanTimer() {
  if (dailyPlanTimer) clearInterval(dailyPlanTimer)
  dailyPlanTimer = setInterval(() => {
    if (dailyPlanList.value.length === 0) return
    dailyPlanIndex = (dailyPlanIndex + 1) % dailyPlanList.value.length
    setDailyPlanData(dailyPlanList.value[dailyPlanIndex])
  }, 5000)
}

// 班组信息
const currentTeamList = ref([])
const currentTeam = ref({
  teamName: '',
  personinCharge: '',
  numberofTeamMembers: '',
  phone: ''
})
let teamIndex = 0
let teamTimer = null

const getTeam = () => {
  http.get('/api/MaterialManagement/GetTeam?id=4').then(res => {
    currentTeamList.value = res.data || []
    if (currentTeamList.value.length > 0) {
      teamIndex = 0
      Object.assign(currentTeam.value, currentTeamList.value[teamIndex])
      startTeamTimer()
    }
  })
}

function startTeamTimer() {
  if (teamTimer) clearInterval(teamTimer)
  teamTimer = setInterval(() => {
    if (currentTeamList.value.length === 0) return
    teamIndex = (teamIndex + 1) % currentTeamList.value.length
    Object.assign(currentTeam.value, currentTeamList.value[teamIndex])
  }, 5000)
}

// 生产计划列表数据
const productionPlanList = ref([
  {
    orderId: '123',
    planQuantity: 123,
    startTime: '2025-05-30 01:44:00',
    endTime: '2025-05-02',
    status: 'pending',
    statusText: '待生产',
    completionRate: 0
  },
  {
    orderId: '20250527',
    planQuantity: 1000,
    startTime: '2025-05-27 14:44:00',
    endTime: '2025-05-27 17:44:00',
    status: 'completed',
    statusText: '订单结束',
    completionRate: 100
  },
  {
    orderId: 'DD2024080902',
    planQuantity: 1000,
    startTime: '2024-08-10 08:13:00',
    endTime: '2024-08-11 08:13:00',
    status: 'processing',
    statusText: '进行中',
    completionRate: 64
  },
  {
    orderId: 'DD2024080901',
    planQuantity: 1000,
    startTime: '2024-08-09 20:55:00',
    endTime: '2024-08-12 20:55:00',
    status: 'processing',
    statusText: '进行中',
    completionRate: 45
  },
  {
    orderId: 'DD2024072201',
    planQuantity: 3000,
    startTime: '2024-07-22 07:57:00',
    endTime: '2024-07-30 09:01:00',
    status: 'processing',
    statusText: '进行中',
    completionRate: 20
  }
])

// 异常列表数据
const exceptionList = ref([
  {
    id: 1,
    time: '2024-03-15 10:30',
    type: '设备故障',
    description: '2号生产线传送带卡死'
  },
  {
    id: 2,
    time: '2024-03-15 11:15',
    type: '质量异常',
    description: '产品尺寸超出规格范围'
  },
  {
    id: 3,
    time: '2024-03-15 14:20',
    type: '系统警告',
    description: '温度过高预警'
  }
])

// 表格滚动效果
const scrollBody = ref<HTMLElement>()
let scrollTimer: number

const startScroll = () => {
  if (!scrollBody.value) return
  
  const scrollStep = () => {
    if (!scrollBody.value) return
    if (scrollBody.value.scrollTop + scrollBody.value.clientHeight >= scrollBody.value.scrollHeight) {
      scrollBody.value.scrollTop = 0
    } else {
      scrollBody.value.scrollTop += 1
    }
  }
  
  scrollTimer = setInterval(scrollStep, 50)
}

onMounted(() => {
  startScroll()
  initCharts()
  autoScroll()
})

onUnmounted(() => {
  clearInterval(scrollTimer)
})

//接受一周不良品数据
const x=ref([])
const y=ref([])
const getSmartDisplayWall=()=>{
  x.value = [];
  y.value = [];
  http.get('/api/MaterialManagement/GetSmartDisplayWall?days=7').then(res => {
  const arr = Array.isArray(res.data) ? res.data : []
  console.log("aee",res)
  arr.forEach(item => {
    x.value.push(item.labelName)
    y.value.push(item.labelValue)
  })
  console.log("111", x.value, y.value)
  initCharts()
})
}

// 初始化图表
const initCharts = () => {
  // 一周不良品统计图表
  const weeklyDefectChart = echarts.init(document.querySelector('.left-section .chart-box:nth-child(1) .chart') as HTMLElement)
  weeklyDefectChart.setOption({
    grid: { top: 30, right: 30, bottom: 30, left: 50, containLabel: true },
    tooltip: { trigger: 'axis', formatter: '{b}: {c}个' },
    xAxis: { type: 'category', data: x.value, axisLine: { lineStyle: { color: '#0a4cd1' } }, axisLabel: { color: '#fff', interval: 0 } },
    yAxis: { type: 'value', axisLine: { lineStyle: { color: '#0a4cd1' } }, axisLabel: { color: '#fff' }, splitLine: { lineStyle: { color: 'rgba(10, 76, 209, 0.1)' } } },
    series: [{
      data: y.value,
      type: 'line',
      smooth: true,
      areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(0, 240, 255, 0.3)' }, { offset: 1, color: 'rgba(0, 240, 255, 0)' }] } },
      lineStyle: { color: '#00f0ff', width: 3 },
      itemStyle: { color: '#00f0ff', borderWidth: 2 },
      emphasis: { itemStyle: { borderWidth: 4 } }
    }]
  })

  // 关键工序图表
  const keyProcessChart = echarts.init(document.querySelector('.left-section .chart-box:nth-child(2) .chart') as HTMLElement)
  keyProcessChart.setOption({
    radar: {
      indicator: [
        { name: '压接端子', max: 100 },
        { name: '绕线', max: 100 },
        { name: '铆压', max: 100 },
        { name: '检测', max: 100 },
        { name: '包装', max: 100 }
      ],
      splitArea: {
        areaStyle: {
          color: ['rgba(0, 240, 255, 0.05)', 'rgba(0, 240, 255, 0.1)']
        }
      },
      axisLine: {
        lineStyle: {
          color: '#0a4cd1'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#0a4cd1'
        }
      },
      name: {
        textStyle: {
          color: '#fff'
        }
      }
    },
    series: [{
      type: 'radar',
      data: [{
        value: [90, 85, 95, 88, 92],
        name: '完成率',
        areaStyle: {
          color: 'rgba(0, 240, 255, 0.3)'
        },
        lineStyle: {
          color: '#00f0ff'
        },
        itemStyle: {
          color: '#00f0ff'
        }
      }]
    }]
  })

  // 一周产量均差图表
  const weeklyOutputChart = echarts.init(document.querySelector('.left-section .chart-box:nth-child(3) .chart') as HTMLElement)
  weeklyOutputChart.setOption({
    grid: {
      top: 30,
      right: 30,
      bottom: 30,
      left: 50,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c}件'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六'],
      axisLine: {
        lineStyle: {
          color: '#0a4cd1'
        }
      },
      axisLabel: {
        color: '#fff',
        interval: 0
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#0a4cd1'
        }
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(10, 76, 209, 0.1)'
        }
      }
    },
    series: [{
      data: [1000, 200, 450, 400, 600, 100],
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#00f0ff'
          }, {
            offset: 1,
            color: 'rgba(0, 240, 255, 0.1)'
          }]
        }
      }
    }]
  })

  // 订单总体进度图表
  const totalProgressChart = echarts.init(document.querySelector('.center-section .chart-box:nth-child(1) .chart') as HTMLElement)
  totalProgressChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 20,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    graphic: [{
      type: 'text',
      left: '25%',
      top: 'middle',
      style: {
        text: '完成率',
        textAlign: 'center',
        fill: '#fff',
        fontSize: 14
      }
    }, {
      type: 'text',
      left: '25%',
      top: '55%',
      style: {
        text: completionRate.value + '%',
        textAlign: 'center',
        fill: '#00f0ff',
        fontSize: 20,
        fontWeight: 'bold'
      }
    }],
    series: [{
      type: 'pie',
      radius: ['65%', '80%'],
      center: ['30%', '50%'],
      label: {
        show: false
      },
      data: [{
        value: produced.value,
        name: '已完成',
        itemStyle: {
          color: '#00f0ff'
        }
      }, {
        value: totalPlan.value - produced.value,
        name: '未完成',
        itemStyle: {
          color: 'rgba(10, 76, 209, 0.3)'
        }
      }]
    }]
  })

  // 订单今日进度图表
  const dailyProgressChart = echarts.init(document.querySelector('.right-section .chart-box:nth-child(1) .chart') as HTMLElement)
  // 计算完成率（已完成=已经生产/今日计划*100，未完成=100-已完成）
  let percent = dailyPlan.value ? (dailyProduced.value / dailyPlan.value * 100) : 0;
  percent = Math.max(0, Math.min(percent, 100));
  percent = Number(percent.toFixed(2));
  let unpercent = Number((100 - percent).toFixed(2));
  dailyProgressChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 20,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    graphic: [{
      type: 'text',
      left: '25%',
      top: 'middle',
      style: {
        text: '完成率',
        textAlign: 'center',
        fill: '#fff',
        fontSize: 14
      }
    }, {
      type: 'text',
      left: '25%',
      top: '55%',
      style: {
        text: percent.toFixed(2) + '%',
        textAlign: 'center',
        fill: '#52c41a',
        fontSize: 20,
        fontWeight: 'bold'
      }
    }],
    series: [{
      type: 'pie',
      radius: ['65%', '80%'],
      center: ['30%', '50%'],
      label: {
        show: false
      },
      data: [{
        value: percent,
        name: '已完成',
        itemStyle: {
          color: '#52c41a'
        }
      }, {
        value: unpercent,
        name: '未完成',
        itemStyle: {
          color: 'rgba(10, 76, 209, 0.3)'
        }
      }]
    }]
  })

  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', () => {
    weeklyDefectChart.resize()
    keyProcessChart.resize()
    weeklyOutputChart.resize()
    totalProgressChart.resize()
    dailyProgressChart.resize()
  })
}

// 重新实现自动滚动逻辑
const autoScroll = () => {
  const scrollContainer = document.querySelector('.scroll-table-container') as HTMLElement;
  const tbody = document.querySelector('.plan-table tbody') as HTMLElement;
  if (!tbody || !scrollContainer) return;

  let currentPosition = 0;
  const rowHeight = 41; // 每行高度
  const containerHeight = scrollContainer.clientHeight;
  const originalRows = Array.from(tbody.children);
  const totalHeight = originalRows.length * rowHeight; // 原始内容的总高度
  const animationSpeed = 0.5; // 滚动速度
  let isHovered = false;

  // 初始化位置，从底部开始
  tbody.style.transform = `translateY(${containerHeight}px)`;

  tbody.addEventListener('mouseenter', () => {
    isHovered = true;
  });

  tbody.addEventListener('mouseleave', () => {
    isHovered = false;
  });

  function animate() {
    if (!isHovered) {
      currentPosition += animationSpeed;

      // 当完整内容滚动出可视区域后重置
      if (currentPosition >= totalHeight + containerHeight) {
        currentPosition = 0;
        // 重置时将内容放置到容器底部
        tbody.style.transform = `translateY(${containerHeight}px)`;
        // 使用setTimeout确保位置重置后再开始新的滚动
        setTimeout(() => {
          requestAnimationFrame(animate);
        }, 100);
        return;
      }

      tbody.style.transform = `translateY(${containerHeight - currentPosition}px)`;
    }
    requestAnimationFrame(animate);
  }

  requestAnimationFrame(animate);
};
</script>

<style scoped>
.smart-screen {
  width: 100%;
  min-width: 1200px;
  min-height: 100vh;
  background: #001529;
  color: #fff;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
  background-image: radial-gradient(circle at 50% 50%, #002a4a 0%, #001529 100%);
  transform: scale(0.85);
  transform-origin: top center;
}

.smart-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to right, rgba(0,240,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,240,255,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
  pointer-events: none;
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, 
    rgba(0,21,41,0) 0%,
    rgba(0,21,41,0.8) 20%,
    rgba(0,21,41,0.8) 80%,
    rgba(0,21,41,0) 100%
  );
  z-index: 1;
  padding: 0 20px;
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
}

.left-decoration,
.right-decoration {
  width: 300px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60'%3E%3Cpath d='M0 30 L100 30 L120 15 L180 45 L200 30 L300 30' stroke='%230a4cd1' fill='none' stroke-width='2'/%3E%3C/svg%3E");
}

.right-decoration {
  transform: scaleX(-1);
}

.center-decoration {
  font-size: 24px;
  font-weight: bold;
  color: #00f0ff;
  text-shadow: 0 0 10px rgba(0,240,255,0.5);
  padding: 0 40px;
  white-space: nowrap;
}

.header {
  position: relative;
  z-index: 1;
  padding: 70px 20px 20px;
  display: flex;
  justify-content: flex-end;
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
}

.time {
  font-size: 18px;
  color: #00f0ff;
  background: rgba(0,21,41,0.6);
  padding: 8px 15px;
  border-radius: 4px;
  border: 1px solid #0a4cd1;
}

.content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 2.5fr 1.5fr;
  gap: 32px;
  padding: 0 20px 20px;
  min-height: calc(100vh - 160px);
  margin: 0 auto;
  max-width: 1800px;
}

.left-section,
.center-section,
.right-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.chart-box {
  background: rgba(0, 21, 41, 0.8);
  border: 1px solid #0a4cd1;
  border-radius: 4px;
  padding: 24px 20px 20px 20px;
  height: 420px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.center-section .chart-box:nth-child(2) {
  height: 540px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scroll-table-container {
  flex: 1;
  overflow: hidden;
  margin-top: 15px;
  position: relative;
  height: calc(100vh - 520px);
  min-height: 400px;
}

.chart-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(0,240,255,0) 0%,
    rgba(0,240,255,0.5) 50%,
    rgba(0,240,255,0) 100%
  );
}

.chart-box::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(10,76,209,0) 0%,
    rgba(10,76,209,1) 50%,
    rgba(10,76,209,0) 100%
  );
}

.chart-box h3 {
  margin: 0 0 20px 0;
  color: #00f0ff;
  font-size: 16px;
}

.chart {
  height: 300px;
  width: 100%;
}

.progress-info {
  margin-top: 15px;
  background: rgba(10, 76, 209, 0.1);
  padding: 12px;
  border-radius: 4px;
}

.progress-info p {
  margin: 6px 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.progress-info p::after {
  content: attr(data-value);
  color: #00f0ff;
}

.team-info {
  background: rgba(10, 76, 209, 0.1);
  padding: 12px;
  border-radius: 4px;
}

.team-info p {
  margin: 8px 0;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.scroll-table-container {
  height: 480px;
  overflow: hidden;
  margin-top: 15px;
  position: relative;
}

.plan-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #0a4cd1;
  border-radius: 4px;
  table-layout: fixed;
  position: absolute;
  left: 0;
  height: 470px;
}

.plan-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0, 21, 41, 0.95);
  display: table;
  width: 100%;
}

.plan-table tbody {
  position: relative;
  transition: none;
  display: block;
}

.plan-table tbody tr {
  height: 41px;
  transition: background-color 0.3s ease;
  display: table;
  width: 100%;
}

.status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-weight: bold;
}

.status.completed {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
}

.status.processing {
  color: #1890ff;
  background: rgba(24, 144, 255, 0.1);
}

.status.pending {
  color: #faad14;
  background: rgba(250, 173, 20, 0.1);
}

.exception-list {
  height: 360px;
  overflow: auto;
}

.exception-item {
  padding: 12px;
  border-bottom: 1px solid #0a4cd1;
  background: rgba(10, 76, 209, 0.1);
  margin-bottom: 8px;
  border-radius: 4px;
}

.exception-item .time {
  color: #00f0ff;
  margin-right: 12px;
  font-size: 13px;
}

.exception-item .type {
  color: #ff4d4f;
  margin-right: 12px;
  font-weight: bold;
  font-size: 13px;
}

.exception-item .description {
  display: block;
  margin-top: 6px;
  color: #fff;
  opacity: 0.8;
  font-size: 13px;
}

.info-box {
  background: rgba(0, 21, 41, 0.8);
  border: 1px solid #0a4cd1;
  border-radius: 4px;
  padding: 24px 20px 20px 20px;
  min-height: 340px;
}

.info-box h3 {
  margin: 0 0 24px 0;
  color: #00f0ff;
  font-size: 20px;
}

.scroll-list {
  padding-right: 10px;
}

:deep(.echarts-tooltip) {
  background: rgba(0, 21, 41, 0.9) !important;
  border: 1px solid #0a4cd1 !important;
}

/* 确保页面在小屏幕上也能完整显示 */
@media screen and (max-height: 900px) {
  .chart-box {
    height: 260px;
  }
  
  .chart {
    height: 200px;
  }
  
  .scroll-table-container,
  .exception-list {
    height: 300px;
  }
  
  .content {
    gap: 15px;
  }
  
  .left-section,
  .center-section,
  .right-section {
    gap: 15px;
  }
}

.plan-table th,
.plan-table td {
  padding: 10px 8px;
  text-align: center;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid rgba(10, 76, 209, 0.3);
}

.plan-table th {
  background: rgba(10, 76, 209, 0.3);
  font-weight: bold;
  color: #00f0ff;
  height: 45px;
}

.plan-table td {
  border-bottom: 1px solid #0a4cd1;
  height: 40px;
  transition: all 0.3s ease;
}

/* 设置表格列宽 */
.plan-table th:nth-child(1),
.plan-table td:nth-child(1) {
  width: 120px;
}

.plan-table th:nth-child(2),
.plan-table td:nth-child(2) {
  width: 80px;
}

.plan-table th:nth-child(5),
.plan-table td:nth-child(5) {
  width: 100px;
}

.plan-table th:nth-child(6),
.plan-table td:nth-child(6) {
  width: 80px;
}

.plan-table tbody tr:hover {
  background: rgba(10, 76, 209, 0.2);
}

@media screen and (max-width: 1800px) {
  .content {
    max-width: 98vw;
    gap: 20px;
  }
  .left-section, .center-section, .right-section {
    gap: 20px;
  }
  .chart-box, .info-box {
    padding: 16px 10px 10px 10px;
    height: 340px;
  }
  .chart {
    height: 240px;
  }
}
</style>

